<template>
  <div class="mine-sweeper">
    <h2>扫雷小游戏</h2>
    <div class="board">
      <div v-for="(row, rowIndex) in board" :key="rowIndex" class="row">
        <div
          v-for="(cell, colIndex) in row"
          :key="colIndex"
          class="cell"
          :class="{ revealed: cell.revealed, mine: cell.mine && cell.revealed, flag: cell.flagged }"
          @click="revealCell(rowIndex, colIndex)"
          @contextmenu.prevent="toggleFlag(rowIndex, colIndex)"
        >
          <!-- 修改：调整逻辑顺序，确保炸弹图标优先显示 -->
          <span v-if="cell.revealed && cell.mine">💣</span>
          <span v-else-if="cell.flagged">🚩</span>
          <span v-else-if="cell.revealed && cell.adjacentMines > 0" :style="{ color: getColor(cell.adjacentMines) }">{{ cell.adjacentMines }}</span>
        </div>
      </div>
    </div>
    <div class="controls">
      <button @click="resetGame">重新开始</button>
      <span>剩余地雷: {{ mines - flaggedMines }}</span>
      <span>剩余标记机会: {{ markingAttempts }}</span>
      <span>当前关卡: {{ level }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MineSweeper',
  data() {
    return {
      rows: 9,
      cols: 9,
      mines: 10,
      board: [],
      flaggedMines: 0,
      markingAttempts: 3,
      level: 1,
    };
  },
  mounted() {
    this.initializeBoard();
  },
  methods: {
    initializeBoard() {
      this.board = Array.from({ length: this.rows }, () =>
        Array.from({ length: this.cols }, () => ({ revealed: false, mine: false, adjacentMines: 0, flagged: false }))
      );
      this.placeMines();
      this.calculateAdjacentMines();
    },
    placeMines() {
      let minesPlaced = 0;
      while (minesPlaced < this.mines) {
        const row = Math.floor(Math.random() * this.rows);
        const col = Math.floor(Math.random() * this.cols);
        if (!this.board[row][col].mine) {
          this.board[row][col].mine = true;
          minesPlaced++;
        }
      }
    },
    calculateAdjacentMines() {
      for (let row = 0; row < this.rows; row++) {
        for (let col = 0; col < this.cols; col++) {
          if (this.board[row][col].mine) continue;
          let count = 0;
          for (let i = -1; i <= 1; i++) {
            for (let j = -1; j <= 1; j++) {
              const newRow = row + i;
              const newCol = col + j;
              if (
                newRow >= 0 &&
                newRow < this.rows &&
                newCol >= 0 &&
                newCol < this.cols &&
                this.board[newRow][newCol].mine
              ) {
                count++;
              }
            }
          }
          this.board[row][col].adjacentMines = count;
        }
      }
    },
    revealCell(row, col) {
      if (this.board[row][col].revealed || this.board[row][col].flagged) return;
      this.board[row][col].revealed = true;
      if (this.board[row][col].mine) {
        alert('游戏结束！你踩到了地雷！');
        this.initializeBoard();
      } else if (this.board[row][col].adjacentMines === 0) {
        this.revealAdjacentCells(row, col);
      }
      if (this.checkWin()) {
        this.levelUp();
      }
    },
    revealAdjacentCells(row, col) {
      for (let i = -1; i <= 1; i++) {
        for (let j = -1; j <= 1; j++) {
          const newRow = row + i;
          const newCol = col + j;
          if (
            newRow >= 0 &&
            newRow < this.rows &&
            newCol >= 0 &&
            newCol < this.cols &&
            !this.board[newRow][newCol].revealed &&
            !this.board[newRow][newCol].flagged
          ) {
            this.revealCell(newRow, newCol);
          }
        }
      }
    },
    toggleFlag(row, col) {
      if (this.board[row][col].revealed || this.markingAttempts <= 0) return;
      this.board[row][col].flagged = !this.board[row][col].flagged;
      if (this.board[row][col].flagged) {
        this.markingAttempts--;
        if (this.board[row][col].mine) {
          this.flaggedMines++;
        }
      } else {
        if (this.board[row][col].mine) {
          this.flaggedMines--;
        }
        this.markingAttempts++;
      }
    },
    resetGame() {
      this.initializeBoard();
      this.markingAttempts = 3;
      this.level = 1;
    },
    checkWin() {
      for (let row = 0; row < this.rows; row++) {
        for (let col = 0; col < this.cols; col++) {
          if (!this.board[row][col].revealed && !this.board[row][col].mine) {
            return false;
          }
        }
      }
      return true;
    },
    levelUp() {
      alert('恭喜你通过了第 ' + this.level + ' 关！');
      this.level++;
      this.rows += 2;
      this.cols += 2;
      this.mines += 5;
      this.initializeBoard();
      this.markingAttempts = 3;
    },
    getColor(num) {
      const colors = ['#0000FF', '#008000', '#FF0000', '#000080', '#800000', '#008080', '#800080', '#000000'];
      return colors[num - 1] || '#000000';
    },
  },
};
</script>

<style scoped>
.mine-sweeper {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}
.board {
  display: flex;
  flex-direction: column;
  margin: 20px auto;
}
.row {
  display: flex;
  flex-wrap: nowrap;
}
.cell {
  background-color: #f0f8ff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 1px solid #595959;
  width: 40px;
  height: 40px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  transition: transform 0.1s;
}
.cell:hover {
  transform: translateY(-2px);
}
.cell.revealed {
  background-color: #fff;
  border-color: #aaa;
}
.cell.mine {
  background-color: #ff0000;
}
.cell.flag {
  background-color: #f0f0f0;
}
.controls {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.controls button {
  padding: 5px 10px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.controls button:hover {
  background-color: #40a9ff;
}
</style>